<template>
  <div>
    <h1>style绑定</h1>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">对象语法
    </div>
    <div v-bind:style="styleObject">对象语法</div>
    <div v-bind:style="[baseStyles, overridingStyles]">数组绑定,有顺序,调整</div>
    <div v-bind:style="[baseStyles,isActive ? overridingStyles : '']">数组语法</div>
  </div>
</template>

<script>
export default {
  name: 'chp-02',
  data () {
    return {
      isActive: true,
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        fontSize: '30px'
      },
      baseStyles: {
        color: 'red',
        fontSize: '30px'
      },
      overridingStyles: {
        color: 'green',
        fontSize: '20px'
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
